// 
@card-prefix: ~"@{prefix}card";

.@{card-prefix} {
    background: #fff;
    border: 1px solid #f2f2f2;
    box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
    transition: 200ms;
}
.@{card-prefix} .tit {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f2f2f2;
    position: relative;
}
.@{card-prefix} .tit h5 {
    line-height: 40px;
    font-size: 14px;
    padding-left: 15px;
    color: #333;
}
.@{card-prefix} .tit h5 i {
    float: left;
    margin-right: 10px;
    font-size: 18px;
    margin-top: 11px;
}
.@{card-prefix} .tit .other {
    position: absolute;
    top: 0px;
    right: 15px;
    color: #666;
    opacity: 0.5;
}
.@{card-prefix} .cont {
    padding: 10px 15px;
    font-size: 14px;
    color: #474747;
}
.@{card-prefix} .ctrls {
    padding: 10px 15px;
    background: #f6f6f6;
}
.@{card-prefix} .ctrls .io-btn {
    margin-right: 10px;
    width: 37.25%;
}

.@{card-prefix}:hover {
    box-shadow: 0px 16px 32px rgba(0,0,0,0.1);
    transform: translate(0px, -2px);
}
